<template>
  <div>
    <!--统计分析演示 活接口-->
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type="ios-trending-up"/>
        <span class="title">疫情情况走势</span>
      </Col>
    </Row>
    <br>
    <div id="conditionTime" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { findAllIllnessStateNumDateList } from '@/api/yi-qing-fang-kong'
import mockData from './mockData'

export default {
  name: 'ConditionTimeEchart2',
  data () {
    return {
      chartData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
    this.chart()
  },
  methods: {
    chart () {
      // findAllIllnessStateNumDateList().then(ret => {
      if (mockData.data.errcode === 0) {
        this.chartData = mockData.data.data
        let option = {
          title: {
            text: ''
          },
          legend: {},
          textStyle: {
            color: '#bababa'
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50,50,50,0.6)'
            // formatter: function (params) {
            //   params = params[0]
            //   const date = new Date(params.value.measure_time)
            //   return date.getFullYear().toString().padStart(4, '0') + '-' +
            //     (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
            //     date.getDate().toString().padStart(2, '0') + '<br>' +
            //     date.getHours().toString().padStart(2, '0') + ':' +
            //     date.getMinutes().toString().padStart(2, '0') + ':' +
            //     date.getSeconds().toString().padStart(2, '0') + '<br>' +
            //     params.value.temperature + '℃'
            // }
          },
          dataset: {
            dimensions: ['date', 'diagnosis', 'suspected', 'die', 'cure'],
            source: []
          },
          yAxis: {
            name: '单位：人',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#bababa' // 轴及其文字颜色
              },
              show: false
            }
          },
          xAxis: {
            name: '',
            boundaryGap: true,
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#bababa' // 轴及其文字颜色
              },
              show: true
            },
            axisLabel: {
              formatter: function (val, index) {
                const date = new Date(val)
                const name = date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate()
                return name
              },
              interval: 'auto', // 全部显示为 0
              rotate: 40
            },
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '确诊',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              label: {
                // normal: {
                //   show: true,
                //   position: 'inside',
                //   color: ['#fff']
                // }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#E55428']
                },
                areaStyle: {},
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '疑似',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              label: {
                // normal: {
                //   show: true,
                //   position: 'inside',
                //   color: ['#fff']
                // }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#F3A94F']
                },
                areaStyle: {},
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '死亡',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              label: {
                // normal: {
                //   show: true,
                //   position: 'inside',
                //   color: ['#fff']
                // }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#000000']
                },
                areaStyle: {},
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            {
              name: '治愈',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              label: {
                // normal: {
                //   show: true,
                //   position: 'inside',
                //   color: ['#fff']
                // }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                  color: ['#088E81']
                },
                areaStyle: {},
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chartData.forEach(item => {
          option.dataset.source.push(item)
        })
        let myChart = echarts.init(document.getElementById('conditionTime'))
        myChart.setOption(option, true)
      } else {
        this.$Message.error({
          content: '数据获取失败,\n' + ret.data.errmsg
        })
      }
      // })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
